import { Tabs } from 'antd';
import { messages } from 'share/common';
import React, { Component } from 'react';
import ScanReceiveInput from 'containers/scan-receive/scan-receive-input';
import ScanSendDelivery from '../financial-management/scan-send/scan-send-delivery';

class ScanReceiveOption extends Component {
  state = {
    tabs: [
      {
        key: 'direct-receive',
        tab: messages('expense-13.key61')/*直接收单*/,
      }, {
        key: 'delivery-receive',
        tab: messages('expense-13.key62')/*快递单收单*/
      }
    ],
    activeTab: window.localStorage.getItem('delivery-receive-tab') || 'direct-receive', // 获取Tab页面 默认直接收单
  };

  onChangeTabs = (activeTab) => {
    this.setState({ activeTab });
    window.localStorage.setItem('delivery-receive-tab', activeTab);
  };

  render() {
    const { tabs, activeTab } = this.state;
    const { isShouldBeCenter } = this.props;
    return (
      <section className={`scan-receive-option ${isShouldBeCenter && 'scan-receive-center'}`}>
        <h1 className='scan-receive-input-title'>{messages('expense-13.key63')/*扫码收单*/}</h1>
        <Tabs animated={false} defaultActiveKey={activeTab} onChange={this.onChangeTabs}>
          {tabs.map(item => React.createElement(Tabs.TabPane, item, item.key === 'direct-receive'
            ? <ScanReceiveInput/>
            : <ScanSendDelivery symbol={item.key}/>
          ))
          }
        </Tabs>
      </section>
    );
  }
}

ScanReceiveOption.propTypes = {
  isShouldBeCenter: false
};

export default ScanReceiveOption;
